<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="$!webPath/css/reset.css" type="text/css">
<link rel="stylesheet" href="$!webPath/css/index.css" type="text/css">
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=uOtaGc6hRYbVHodd5U5rMH17GFliFSYH"></script>
<script>
    function setIframeHeight(iframe) {
        if (iframe) {
            var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
            if (iframeWin.document.getElementsByTagName("body")[0]) {
                iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
            }
        }
    };

    function setheight(){
//        setIframeHeight(document.getElementById('contentFrame'));
        var BodyHeight=document.documentElement.clientHeight;
        BodyHeight -= 130;
        $("#contentFrame").css({
            "height" : BodyHeight +"px"
        });
    }

    window.onload = function () {
        setIframeHeight(document.getElementById('contentFrame'));
    };
</script>
<body class="no-skin">
<body>
<div class="wrap">
    <!-- 头部区域 -->
    <div class="indexCon">
        <!-- 左侧部分 -->
        <div class="leftCon">
            <ul class="leftNav">
                <li class="active">
                    <h2>贫困户分布图</h2>
                    <strong></strong>
                </li>
            </ul>
            <div class="leftMaps">
                <div class="map active">
                    #parse('base/index_map.html')
                </div>
            </div>
        </div>
        <!-- 右侧部分 -->
        <div class="rightCon">
            <ul class="leftNav">
                <li class="active">
                    <h2>贫困人口统计</h2>
                    <strong></strong>
                </li>
            </ul>
            <div class="dataStatistics">
                <!-- echarts柱状图 -->
                <div class="dataPic" id="dataPic"></div>
                <!-- 统计表格 -->
                <div class="dataDetails">
                    <table class="dataDetailsTable" border="1">
                        <thead>
                        <tr>
                            <th></th>
                            <th>常住人口</th>
                            <th>贫困人口</th>
                            <th>占比</th>
                        </tr>
                        </thead>
                        <tbody>
                        #foreach($item in $pkrkList)
                        <tr>
                            <td>$item.townName</td>
                            <td>$item.residentPop</td>
                            <td>$item.povertyPop</td>
                            <td>$item.povertyRatePercent</td>
                        </tr>
                        #end
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="notice">
            <div class="noticeLeft">
                <div class="bg1 radiusTrBl" onclick="fpzcHref(0)">
                    <div>
                        <img src="$!webPath/index/images/bg-i (3).png" alt="扶贫政策">
                        <strong>扶贫政策</strong>
                    </div>
                </div>
                <div class="bg2 radiusTlBr" onclick="fpzcHref(2)">
                    <div>
                        <img src="$!webPath/index/images/bg-i (2).png" alt="分享案例">
                        <strong>示例典范</strong>
                    </div>
                </div>
                <div class="bg3 radiusTrBl">
                    <div>
                        <img src="$!webPath/index/images/bg-i (1).png" alt="帮扶排名">
                        <strong>帮扶排名</strong>
                    </div>
                </div>
                <div class="bg4 radiusTlBr active">
                    <div>
                        <img src="$!webPath/index/images/bg-i (5).png" alt="信息报送">
                        <strong>信息报送</strong>
                    </div>
                    <div class="constructing">
                        <img src="$!webPath/index/images/constructing.png" alt="">
                        <em class="constructing-title">建设中...</em>
                    </div>
                </div>
            </div>
            <div class="noticeRight" onclick="fpzcHref(1)">
                <div class="noticeMessage">
                    <img src="$!webPath/index/images/bg-i (4).png" alt="信息公告">
                    <strong>信息公告</strong>
                </div>
                <div class="mesCon">
                    <ul>
                        #foreach($item in $infoList)
                        <li>
                            <a>
                                <h4>$item.title</h4>
                                <strong>$!dateTool.format('yyyy-MM-dd',$item.pubDate)</strong>
                            </a>
                        </li>
                        #end
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="$!webPath/index/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="$!webPath/index/js/echarts.min.js"></script>
<script>
    $(function(){
        // 头部导航页跳转
        // $(".head_nav ul li").click(function(){
        // $(this).addClass("active").siblings("li").removeClass("active");
        // })
        // 左侧地图的tab切换
        $(".leftCon .leftNav").on("click","li",function(){
            $(this).addClass("active").siblings("li").removeClass("active");
            console.log($(this).index());
            $(".leftMaps .map").eq($(this).index()).addClass("active").siblings("div").removeClass("active");
        });
        // 底部的功能块tab切换
        // $(".noticeLeft>div").click(function(){
        // 	$(this).addClass("active").siblings("div").removeClass("active").find("p").css("display","none");
        // 	clearTimeout(timer);
        // 	var timer = setTimeout(function(){
        // 		$(".noticeLeft .active p").css("display","block");
        // 	},1000)
        // })
        // echarts柱状图
        var myChart = echarts.init(document.getElementById('dataPic'));
        var  option = {
            title : {
                text : ""
            },
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data:['常驻人口','贫困人口']
            },
            grid: {
                top: '8%',
                left: '0%',
                right: '0%',
                bottom: '8%',
                containLabel: true
            },
            calculable : true,
            xAxis : [
                {
                    // type : 'category',
                    data : [
                         #foreach($item in $pkrkList)
        "$item.townName",
                         #end
        ],
        "axisLabel":{
            interval: 0
        }
    }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
                series : [
            {
                name:'常驻人口',
                type:'bar',
                data:[
                        #foreach($item in $pkrkList)
        "$item.residentPop",
                        #end
        ],
        barWidth : 15,
                itemStyle:{
            normal:{
                color:'#0681e8'
            }
        },
    },
        {
            name:'贫困人口',
                    type:'bar',
                data:[
                        #foreach($item in $pkrkList)
            "$item.povertyPop",
                        #end
        ],
            barWidth : 15,
                    itemStyle:{
            normal:{
                color:'#f77601'
            }
        },
        }
        ]
    };
        myChart.setOption(option);
    });
</script>
<script>
    function fpzcHref(infoType){
        parent.location.href = "$!webPath/xxgl/main?infoType=" + infoType
    }
    function noticeHref(noticeId){
        parent.location.href = "$!webPath/xxgl/main?infoType=1&noticeId=" + noticeId
    }
</script>
</body>
</body>
</html>
